<template>
  <div class="app-container">
    <!-- <div class="header">
      <el-form :inline="true" :model="filter" ref="ruleFormRef">
        <el-form-item label="设备名称" prop="username">
          <el-select v-model="filter.type_id" placeholder="请选择" clearable>
            <el-option v-for="item in typeArr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searChange" :icon="Search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="footer">
      <div class="util" v-if="auth && auth.add">
        <el-button type="success" @click="router.back()" v-if="route.query.id">
          返回
        </el-button>
      </div>
      <div class="table-inner">
        <el-table class="table" v-loading="loading" row-key="id" :data="list" style="width: 100%" border>
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column prop="title" label="题目" show-overflow-tooltip align="center" />
          <el-table-column prop="content" label="内容" show-overflow-tooltip align="center" minWidth="200" />
          <el-table-column prop="is_read" label="是否阅读" show-overflow-tooltip align="center" width="100">
            <template #default="scope">
              <el-tag type="info" v-if="scope.row.is_read == 1">已读</el-tag>
              <el-tag type="" v-else>未读</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="update_time" label="阅读时间" align="center" width="180">
            <template #default="scope">
              <span v-if="scope.row.is_read == 1">{{ scope.row.update_time }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" align="center" width="180" />
          <el-table-column prop="operator" label="操作" width="200px" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)" v-if="auth && auth.edit">
                编辑
              </el-button>
              <el-button type="danger" size="small" icon="Delete" @click="del(scope.row)" v-if="auth && auth.delete">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination v-model:currentPage="query.page" :page-size="query.limit" :total="total" background
          layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <EditDialog ref="editDialog" @refresh="getList" />
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { nextTick, onMounted, reactive, ref } from 'vue'
import EditDialog from './components/EditDialog.vue'
import { msgList, msgDelete, msgEdit } from '@/api/admin'
import { useRoute, useRouter } from 'vue-router'
const editDialog=ref()
const router = useRouter()
const route = useRoute()
const loading = ref(true)
const list = ref()
const total = ref(0)
const query = reactive({
  page: 1,
  limit: 10
})
const auth = ref()

const getList = () => {
  loading.value = true
  msgList(query).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = res.data.data
      total.value = res.data.count
    }
    loading.value = false
  })
}

const editHandler = (row) => {
  editDialog.value.show(row)
}

const del = (row) => {
  ElMessageBox.confirm(`你确定要删除 “${row.title}” 吗?`, '温馨提示', {
    type: 'warning',
  }).then(() => {
    msgDelete({
      id: row.id,
    }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}
const handleSizeChange = (val: number) => {
  query.page = 1
  query.limit = val
  getList()
}

const handleCurrentChange = (val: number) => {
  query.page = val
  getList()
}

nextTick(() => {
  getList()
})
</script>

<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

.footer {
  flex: 1;
  display: flex;
  padding: 16px;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  position: relative;
  box-sizing: border-box;

  .util {
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .table-inner {
    flex: 1;
    position: relative;
  }

  .table {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}
</style>
